<template>
  <main>
    <button @click="increment(100)">count: {{ count }}</button>
    <button @click="fn1">myCount: {{ myCount }}</button>
    <button @click="asyncIncrement">aCount: {{ aCount }}</button>
    <button>bCount: {{ bCount }}</button>
    <p>{{ getTodoById(1) }}</p>
    <p>{{ getTodoById(2) }}</p>
  </main>
</template>

<script>
// 辅助函数都来自于 vuex 的包，需要使用那个就引入那个
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

import { DECREMENT } from '../store/mutation-types'

export default {
  // computed: {
  //   ...mapState(['count']),

  //   myCount() {
  //     return this.$store.state.count
  //   }
  // }

  data() {
    return {
      localCount: 10
    }
  },

  computed: {
    ...mapState(['count']),
    ...mapState({
      // 1. value 是一个字符串
      myCount: 'count',
      // 2. value 是一个箭头函数
      aCount: (state) => state.count,
      // 3. value 是一个普通函数
      bCount(state) {
        return state.count + this.localCount
      }
    }),

    ...mapGetters(['doneTodos', 'getTodoById'])

    // doneTodos() {
    //   return this.$store.getters.doneTodos
    // }

    // myCount() {
    //   return this.$store.state.count
    // }
  },

  methods: {
    ...mapMutations(['increment', 'decrement']),
    ...mapActions(['asyncIncrement']),

    fn1() {
      // 1. 通过 this.$store.commit() 去提交一个突变
      //    this.$store.commit(突变的名字, 传递给突变函数的参数)
      // this.$store.commit('increment', 100)

      this.$store.commit(DECREMENT)
    },

    fn2() {
      // 通过 this.$store.dispatch() 去派发一个动作
      this.$store.dispatch('asyncIncrement', '张三')
    }
  }
}
</script>

<!-- 
  mapState(['count', 'msg'])  => 

  {
    count() {
      return this.$store.state.count
    },
    msg() {
      return this.$store.state.msg
    }
  }

  mapGetters(['doneTodos'])  => 

  {
    doneTodos() {
      return this.$store.getters.doneTodos
    }
  }


  mapMutations(['increment', 'decrement']) => 

  {
    increment(payload) {
      this.$store.commit('increment', payload)
    },

    decrement(payload) {
      this.$store.commit('decrement', payload)
    }
  }


  mapActions(['asyncIncrement']) => 

  {
    asyncIncrement(payload) {
      this.$store.dispatch('asyncIncrement', payload)
    }
  }

 -->
